<template>
    <div class="body">
        <div class="header">
            <div>
                <ul>
                    <li @click="popupVisible=!popupVisible">
                        <label>{{text}}</label>
                        <img src="../../assets/img/gg_icon_sc_w.png" alt="">
                    </li>
                </ul>
            </div>
            <span @click="popupVisible=!popupVisible">筛选</span>
        </div>
        <img v-if="dataList.length<=0" class="noneList" src="../../assets/img/gg_img_zanwu.png" alt="">
        <div class="center">
            <dl v-for="(item,index) in dataList" :key="index">
                <dd @click="jiantou($event)" data-info="false" class="active">
                    <span>{{index}}</span>
                    <div><img src="../../assets/img/gg_icon_down.png" alt=""></div>
                    <i>当月总收入￥{{item.total_amount | money}}</i>
                </dd>
                <dt>
                    <li v-for="(itemr,i) in item.data" :key="i">
                        <h1>{{itemr.title}}</h1>
                        <h2 v-if="itemr.type!=2">{{itemr.type==8?itemr.reject_reason:itemr.remark}}</h2>
                        <h2 v-if="itemr.type==2">提现成功</h2>
                        <h3>{{itemr.created_at}}</h3>
                        <div></div>
                        <p class="activep" v-if="itemr.type===7 || itemr.type===8 || itemr.type===10">-{{itemr.amount | money}}</p>
                        <p v-else>+{{itemr.amount | money}}</p>
                    </li>
                </dt>
            </dl>

        </div>
        <div style="height:0.84rem;"></div>
        <mt-popup
                v-model="popupVisible"
                position="top"
                closeOnClickModal="true"
        >
            <div class="checkBox">
<!--                <img @click="close()" class="close" src="../../assets/img/rwxx_icon_gb.png" alt="">-->

                <h1>请选择资金类型</h1>

                <ul>
                    <li @click="checkType(0,'全部')" :class="{active:icur===0}">全部</li>
                    <li @click="checkType(1,'拉新')" :class="{active:icur===1}">拉新</li>
                    <li @click="checkType(2,'任务分润')" :class="{active:icur===2}">任务分润</li>
                    <li @click="checkType(3,'活动')" :class="{active:icur===3}">活动</li>
                    <li @click="checkType(4,'收入')" :class="{active:icur===4}">收入</li>
                    <li @click="checkType(5,'支出')" :class="{active:icur===5}">支出</li>
                </ul>
            </div>
        </mt-popup>
    </div>
</template>

<script>

    import {axiosPost} from "../../axios";

    export default {
        name: "",
        data() {
            return {
                icur: 0,
                active: 0,
                popupVisible: false,
                text: '全部',
                dataList:[]

            }
        },
        mounted() {
            this.getList();
        },
        methods: {
            jiantou(event) {
                let el = event.currentTarget;
                if (el.getAttribute("data-info") == "true") {
                    el.setAttribute("data-info", "false");
                    el.children[1].removeAttribute("class");
                    el.parentElement.children[1].style.display = "block";
                } else {
                    el.setAttribute("data-info", "true");
                    el.children[1].setAttribute("class", "active");
                    el.parentElement.children[1].style.display = "none";
                }
            },
            checkType(id, text) {
                this.icur = id;
                this.text = text;
                this.getList();
                this.popupVisible = !this.popupVisible;
            },
            close() {
                this.popupVisible = !this.popupVisible;
            },
            getList() {
                axiosPost('order/amount_all',{
                    'user_id':JSON.parse(localStorage.getItem('userinfo')).user_id,
                    'select_type':this.icur
                },(res)=>{
                    //console.log(res)
                    if(res.code!==1){
                        this.dataList = [];
                        return
                    }
                    this.dataList = res.data;
                });
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../style/default";

    .header {
        height: 0.9rem;
        padding: 0 0.4rem;
        line-height: 0.9rem;
        background: @color4;

        div {
            max-width: 80%;
            display: inline-block;
            height: 0.9rem;
            overflow-x: auto;
        }

        ul {
            overflow: hidden;
            width: 10rem;

            li {
                min-width: 1.1rem;
                height: 0.52rem;
                line-height: 0.52rem;
                background: rgba(190, 191, 197, 1);
                border-radius: 0.26rem;
                cursor: pointer;
                float: left;
                margin-top: 0.19rem;
                text-align: center;
                font-size: @font28;
                font-weight: 400;
                color: @color4;
                margin-right: 0.2rem;
                padding: 0 0.15rem;

                label {

                }
                img{
                    width: 0.21rem;
                    height: 0.19rem;
                    margin-left: 0.05rem;
                }
            }
        }

        span {
            float: right;

            font-size: @font32;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
        }
    }

    .center {
        overflow: hidden;
        background: @color4;

        dl {
            dd {
                height: 1.2rem;
                background: rgba(247, 247, 248, 1);
                padding: 0 0.4rem;
                line-height: 1.2rem;

                span {
                    float: left;
                    font-size: @font32;
                    color: @color2;
                }

                .active {
                    img {
                        transform: rotate(360deg);
                        -webkit-transform: rotate(360deg);
                        -moz-transform: rotate(360deg);
                        -o-transform: rotate(360deg);
                        -ms-transform: rotate(360deg);
                    }
                }

                div {
                    float: left;
                    width: 0.3rem;
                    height: 0.6rem;
                    margin-top: 0.3rem;
                    position: relative;

                    img {
                        width: 0.2rem;
                        height: 0.13rem;
                        display: inline-block;
                        position: absolute;
                        left: 0.05rem;
                        top: 0.235rem;

                        transition: All 0.3s ease-in-out;
                        -webkit-transition: All 0.3s ease-in-out;
                        -moz-transition: All 0.3s ease-in-out;
                        -o-transition: All 0.3s ease-in-out;

                        transform: rotate(180deg);
                        -webkit-transform: rotate(180deg);
                        -moz-transform: rotate(180deg);
                        -o-transform: rotate(180deg);
                        -ms-transform: rotate(180deg);
                    }
                }

                i {
                    float: right;
                    font-size: @font24;
                    color: @color2;
                }
            }

            dt {
                padding: 0 0.4rem;


                li {
                    min-height: 2rem;
                    position: relative;
                    overflow: hidden;

                    h1 {
                        font-size: @font34;
                        font-weight: 400;
                        color: @color5;
                        margin-top: 0.4rem;
                    }

                    h2 {
                        width: 4.7rem;
                        font-size: @font24;
                        font-weight: 400;
                        color: rgba(170, 170, 170, 1);
                        padding: 0.21rem 0;
                    }

                    h3 {
                        font-size: @font24;
                        font-weight: 400;
                        color: rgba(104, 104, 119, 1);
                        padding: 0.15rem 0 0.3rem;
                    }

                    div {
                        border-bottom: 1px solid rgba(239, 239, 239, 1);
                        margin-right: -0.4rem;
                    }

                    p {
                        font-size: @font36;
                        font-weight: bold;
                        color: rgba(0, 166, 12, 1);
                        line-height: 0.48rem;
                        position: absolute;
                        right: 0;
                        top: 0.6rem;
                    }

                    .activep {
                        color: rgba(255, 70, 45, 1);
                    }
                }
            }
        }
    }

    .checkBox {
        width: 7.5rem;
        margin: 0 auto;
        height: 3.9rem;
        background: @color4;
        overflow: hidden;

        .close {
            position: absolute;
            left: 50%;
            bottom: -0.8rem;
            margin-left: -0.25rem;
            width: 0.5rem;
            height: 0.5rem;
        }

        h1 {
            font-size: 0.34rem;
            font-weight: 400;
            color: rgba(255, 70, 45, 1);
            text-align: center;
            margin: 0.6rem 0 0.4rem;
        }

        ul {
            overflow: hidden;
            padding: 0 0.25rem;

            li {
                width: 2.03rem;
                border-radius: 0.4rem;
                font-size: 0.32rem;
                font-weight: 400;
                text-align: center;
                padding: 0.18rem 0;
                float: left;
                background: rgba(255, 255, 255, 1);
                color: rgba(104, 104, 119, 1);
                border: 0.01rem solid rgba(203, 203, 203, 1);
                margin: 0.12rem;
            }

            .active {
                background: rgba(255, 70, 45, 1);
                color: rgba(255, 255, 255, 1);
                border: 0.01rem solid rgba(255, 70, 45, 1);
            }
        }
    }
</style>